<template>
  <div class="detail" :class="{ loading: toloading }">
    <Loading v-if="toloading"></Loading>
    <template v-else>
      <div class="toptest">
        <div
          class="image"
          :style="{
            height: ((recipe.ph * 1) / recipe.pw) * 1 * 100 + 'vw',
            backgroundImage: 'url(' + recipe.photo_path + ')',
          }"
        >
          <div class="mask"></div>
          <div class="top">
            <div class="back" @click="$router.push({ path: lastrouter })"></div>
            <div class="share"></div>
          </div>
        </div>
        <div class="title">
          <h1>{{ recipe.title }}</h1>
          <div class="a">
            <span>精品 · </span>
            <span>独家 · </span>
            <span>浏览 {{ recipe.views_count_text }} · </span>
            <span>收藏 {{ fav }}</span>
          </div>
        </div>
      </div>
      <div class="user">
        <div class="usermsg">
          <div class="userImg">
            <img :src="recipe.user.user_photo" alt="" />
          </div>
          <div class="username">
            <h3>{{ recipe.user.nickname }}</h3>
            <i>LV.{{ recipe.user.lvl }}</i>
          </div>
        </div>
        <div class="followbtn">关注</div>
      </div>
      <div class="cookstory">
        <ul>
          <li v-for="(item, index) in cookstory" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="lvT">
        <div class="tim">
          <img src="../assets/dct.png" alt="" />
          <h3>{{ recipe.cook_time }}</h3>
        </div>
        <div class="lv">
          <img src="../assets/dcl.png" alt="" />
          <h3>{{ recipe.cook_difficulty || "切墩(初级)" }}</h3>
        </div>
      </div>
      <FoodList :list="recipe.major"></FoodList>
      <NutritionFacts
        :list="recipe.nutrition_facts"
        :text="recipe.nutrition_facts_hint_text"
      ></NutritionFacts>
      <CookStep
        :step="recipe.cookstep"
        :tips="recipe.tips"
        :time="recipe.release_time"
      ></CookStep>
      <div class="tobot"></div>
      <div class="bottom">
        <div class="inp">
          <input type="text" placeholder="说点什么" />
        </div>
        <div class="right">
          <div class="com">
            <p @click="show = true"></p>
            <span>{{ comNum }}</span>
          </div>
          <div class="fav" :class="{ faved: faved }" @click.stop="toggetfav">
            <p></p>
            <span>{{ favt }}</span>
          </div>
        </div>
      </div>
      <van-popup
        v-model="show"
        round
        position="bottom"
        class="popcom"
        :style="{ height: '60vh' }"
      >
        <div class="comtop">
          <h3>全部评论 ({{ comNum }})</h3>
          <span @click="show = false"></span>
        </div>
        <div class="comlist">
          <div class="empty" v-if="comList.length == 0">暂无评论</div>
          <ul v-else>
            <!-- <li v-for="item in comList" :key="item.id">
            </li> -->
            <CommentItem
              v-for="item in comList"
              :key="item.id"
              :item="item"
            ></CommentItem>
          </ul>
        </div>
      </van-popup>
    </template>
  </div>
</template>

<script>
import FoodList from "@/components/FoodList.vue";
import Loading from "@/components/Loading.vue";
import NutritionFacts from "@/components/NutritionFacts.vue";
import CookStep from "@/components/CookStep.vue";
import CommentItem from "@/components/CommentItem.vue";
import { mapState } from "vuex";
export default {
  components: {
    FoodList,
    Loading,
    NutritionFacts,
    CookStep,
    CommentItem,
  },
  data: function () {
    return {
      show: false,
      recipe: {},
      lastrouter: "",
      toloading: false,
      favt: "收藏",
      comNum: 0,
      comList: [],
      faved: false,
    };
  },
  computed: {
    ...mapState(["favList"]),
    fav() {
      return Math.floor(this.recipe.favo_counts / 10000)
        ? this.recipe.favo_counts / 10000 + "万"
        : this.recipe.favo_counts;
    },
    cookstory() {
      if (this.recipe.cookstory) {
        return this.recipe.cookstory.split("\n\n");
      }
      return "";
    },
  },
  watch: {
    favList(n) {
      n.indexOf(this.$route.query.id * 1) != -1
        ? (this.faved = true)
        : (this.faved = false);
    },
  },
  created: function () {
    // console.log(this.$route);
    // console.log(this.$route.query.id);
    this.toloading = true;
    this.axios
      .get(
        `https://apis.netstart.cn/douguo/recipe/detail/${this.$route.query.id}`
      )
      .then((res) => {
        // console.log(res.data.result.recipe);
        this.recipe = res.data.result.recipe;
      })
      .then(() => {
        this.axios
          .get(
            `https://apis.netstart.cn/douguo/recipe/flatcomments/${this.$route.query.id}/0/20`
          )
          .then((res) => {
            console.log(res.data);
            this.comNum = res.data.result.cc;
            this.comList = res.data.result.comments;
            this.toloading = false;
          });
      });
    this.$store.state.favList.indexOf(this.$route.query.id * 1) != -1
      ? (this.faved = true)
      : (this.faved = false);
  },

  methods: {
    toggetfav() {
      if (localStorage.getItem("login") == "true") {
        if (this.faved) {
          this.$store.commit("cutfav", this.$route.query.id * 1);
        } else {
          this.$store.commit("addfav", this.$route.query.id * 1);
        }
        this.faved = !this.faved;
      } else {
        this.$router.push({ path: "/login?f=home&b=home" });
      }
    },
  },

  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // console.log(from);
    next((vm) => {
      vm.lastrouter = from.fullPath;
    });
  },
};
</script>

<style lang="less" scoped>
.detail {
  &.loading {
    height: 100vh;
    display: flex;
    align-items: center;
  }
  .toptest {
    .image {
      width: 100vw;
      background-color: rgba(0, 0, 0, 0.5);
      // background-image: url();
      background-size: 100%;
      position: relative;
      .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.6),
          rgba(0, 0, 0, 0) 25% 100%
        );
      }
      .top {
        width: 100%;
        position: absolute;
        top: 20px;
        left: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        .back {
          width: 20px;
          height: 20px;
          background-image: url("../assets/tob.png");
          background-size: 100%;
          background-position: center;
        }
        .share {
          width: 20px;
          height: 20px;
          background-image: url("../assets/tos.png");
          background-size: 100%;
          background-position: center;
        }
      }
    }
    .title {
      padding: 10px 15px;
      h1 {
        font-size: 17px;
        font-weight: bold;
      }
      .a {
        margin-top: 3px;
        display: block;
        font-size: 12px;
        color: #777;
        transform-origin: left;
        transform: scale(0.9);
      }
    }
  }
  .lvT {
    width: 100%;
    display: flex;
    padding: 10px 15px 20px 15px;
    // justify-content: space-between;
    div {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 5vw;
      }
      h3 {
        font-size: 15px;
        margin-left: 5px;
        font-weight: bolder;
      }
    }
  }
  .user {
    margin-top: 10px;
    padding: 5px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .usermsg {
      display: flex;
      align-items: center;
      .userImg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        img {
          vertical-align: middle;
        }
      }
      .username {
        display: flex;
        align-items: center;
        h3 {
          margin-left: 10px;
          font-size: 13px;
          font-weight: bold;
        }
        i {
          margin-left: 5px;
          font-size: 12px;
          color: #cba43b;
        }
      }
    }
    .followbtn {
      font-size: 13px;
      font-weight: bold;
      padding: 5px 20px;
      background-color: #ffc533;
      border-radius: 40px;
    }
  }
  .cookstory {
    padding: 10px 15px;
    ul {
      li {
        line-height: 25px;
        font-size: 15px;
        margin-top: 30px;
        &:first-child {
          margin-top: 10px;
        }
      }
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: 10px;
    align-items: center;
    background-color: #fff;
    .inp {
      // display: flex;
      // justify-content: center;
      input {
        padding: 5px;
        border-radius: 20px;
        text-indent: 10px;
        border-style: none;
        background-color: #eee;
      }
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      .com {
        display: flex;
        p {
          margin-right: 3px;
          width: 20px;
          height: 20px;
          background-image: url("../assets/apl.png");
          background-size: 100%;
          background-position: center;
        }
      }
      .fav {
        display: flex;
        &.faved > p {
          background-image: url("../assets/faved.png");
        }
        p {
          width: 20px;
          height: 20px;
          background-image: url("../assets/fav.png");
          background-size: 100%;
          background-position: center;
          margin-right: 3px;
        }
      }
    }
  }
  .popcom {
    // position: relative;
    .comtop {
      position: flex;
      bottom: 60vh;
      left: 0px;
      width: 100%;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      span {
        width: 20px;
        height: 20px;
        background-image: url("../assets/logb.png");
        background-size: 100%;
        background-position: center;
      }
    }
    .comlist {
      .empty{
        width: 100%;
        text-align: center;
        margin-top: 20px;
        color: #777;
        font-size: 12px;
      }
      ul {
        height: 53vh;
        overflow-y: auto;
      }
    }
  }
  .tobot {
    height: 50px;
  }
}
</style>